<template>
    <div class="ma-content-block  justify-between p-4">
        <div style="display:flex;justify-content: flex-end;width:100%;">
          <div style='font-size:24px'>{{newDete}}</div>
        </div>
        <div class='flex'>
          <div style="margin-right:20px;overflow: scroll;" :style="{height:(ksHeght - 150) + 'px'}">
            <div :class='item.id == storeId?"act_box":"no_box"' @click='handleTab(item.id)' class="cursor" style='padding:12px;margin-bottom:12px' v-for='(item,index) in storeList.values' :key="index">
              <div class='flex align_center'>
                <div style="margin-right:8px">
                  <img src="./img/tip.png" style="width:20px;height:20px;display:block"/>
                </div>
                <div style="font-size:16px;font-weight: 600;color:#415B73">{{item.name}}</div>
              </div>
              <img src="./img/line.png" style="width:100%;height:2px;display:block;margin:12px 0"/>
              <div class="flex">
                <div class='flex  flex_1 ' style='margin-right:10px;'>
                  <div class=" flex align_center" style="margin-right:5px;font-size:14px;color:#7395B3">
                    <div>件数</div>
                  </div>
                  <div class="flex_1  flex align_center " style="font-size:14px;color:#7395B3;">
                    <a-tooltip :content="item.number">
                      <div class='ellipsis flex_1 width0 text_center' style="font-size:18px;color:#00AB84;font-weight:600">{{item.number}}</div>
                    </a-tooltip>
                    <div> 件</div>
                  </div>
                </div>
                <div class='flex flex_1 ' style=''>
                  <div class="flex align_center  " style="margin-right:5px;font-size:14px;color:#7395B3">
                    <div>重量</div>
                  </div>
                  <div class="flex align_center flex_1  " style="font-size:14px;color:#7395B3;">
                    <a-tooltip :content="item.weight">
                      <div class='ellipsis flex_1 width0 text_center' style="font-size:18px;color:#00AB84;font-weight:600">{{item.weight}}</div>
                    </a-tooltip>
                    <div> 吨</div>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class='flex  flex_1 ' style='margin-right:10px;'>
                  <div class=" flex align_center" style="margin-right:5px;font-size:14px;color:#7395B3">
                    <div>重箱</div>
                  </div>
                  <div class="flex_1  flex align_center " style="font-size:14px;color:#7395B3;">
                    <a-tooltip :content="item.zhongxiang">
                      <div class='ellipsis flex_1 width0 text_center' style="font-size:18px;color:#00AB84;font-weight:600">{{item.zhongxiang}}</div>
                    </a-tooltip>
                    <div> 箱</div>
                  </div>
                </div>
                <div class='flex flex_1 ' style=''>
                  <div class="flex align_center  " style="margin-right:5px;font-size:14px;color:#7395B3">
                    <div>空箱</div>
                  </div>
                  <div class="flex align_center flex_1  " style="font-size:14px;color:#7395B3;">
                    <a-tooltip :content="item.kongxiang">
                      <div class='ellipsis flex_1 width0 text_center' style="font-size:18px;color:#00AB84;font-weight:600">{{item.kongxiang}}</div>
                    </a-tooltip>
                    <div> 箱</div>
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class='flex  flex_1 ' style='margin-right:10px;'>
                  <div class=" flex align_center" style="margin-right:5px;font-size:14px;color:#7395B3">
                    <div>总库位</div>
                  </div>
                  <div class="flex_1  flex align_center " style="font-size:14px;color:#7395B3;">
                    <a-tooltip :content="item.all_kuwei">
                      <div class='ellipsis flex_1 width0 text_center' style="font-size:18px;color:#00AB84;font-weight:600">{{item.all_kuwei}}</div>
                    </a-tooltip>
                    <div> 个</div>
                  </div>
                </div>
                <div class='flex flex_1 ' style=''>
                  <div class="flex align_center  " style="margin-right:5px;font-size:14px;color:#7395B3">
                    <div>空闲库位</div>
                  </div>
                  <div class="flex align_center flex_1  " style="font-size:14px;color:#7395B3;">
                    <a-tooltip :content="item.yu_kuwei">
                      <div class='ellipsis flex_1 width0 text_center' style="font-size:18px;color:#00AB84;font-weight:600">{{item.yu_kuwei}}</div>
                    </a-tooltip>
                    <div> 个</div>
                  </div>
                </div>
              </div>
              
            </div>
          </div>
          <div class="" :style="{width:(ksWight - 463) + 'px'}">
            <div class="flex align_center justify_between" style="padding:12px 20px;margin-bottom:16px">
              <div class="flex align_center">
                <div class="flex align_center" style="margin-right:16px">
                  <div style="margin-right:6px">
                    <img src="./img/lu.png" style="width:20px;height:20px;display:block"/>
                  </div>
                  <div style="font-size:14px;color:#415B73">闲置仓位</div>
                </div>
                <div class="flex align_center" style="margin-right:16px">
                  <div style="margin-right:6px">
                    <img src="./img/zi.png" style="width:20px;height:20px;display:block"/>
                  </div>
                  <div style="font-size:14px;color:#415B73">使用中仓位</div>
                </div>
                <div class="flex align_center" style="margin-right:16px">
                  <div style="margin-right:6px">
                    <img src="./img/hui.png" style="width:20px;height:20px;display:block"/>
                  </div>
                  <div style="font-size:14px;color:#415B73">不可用仓位</div>
                </div>
                <div class="flex align_center" >
                  <div style="margin-right:6px">
                    <img src="./img/hong.png" style="width:20px;height:20px;display:block"/>
                  </div>
                  <div style="font-size:14px;color:#415B73">搜索高亮显示放量</div>
                </div>
              </div>
              <div class="flex align_center relative">
                <div class="input flex align_center" style="padding:5px">
                    <a-select v-model="dept_id" :style="{width:'100%'}" :options="dept_list" :field-names="fieldNamedept" :filter-option="filterOption" placeholder="请选择客户" :bordered="false" allow-clear allow-search />
                </div>
                <input placeholder="输入品名查询" v-model="goods_name" class="input" style="margin-left:10px"/>
                <input placeholder="输入箱号" v-model="box" class="input" style="margin-left:10px"/>
                <input placeholder="输入车号" v-model="car_no" class="input" style="margin-left:10px"/>
                <div style="margin-left:10px" class="cursor" @click="handleSech">
                  <img src="./img/search.png" style="width:36px;height:36px;display:block"/>
                </div>
                <div class="cursor" style="margin-left:10px;font-size:16px;line-height:16px;padding:10px 14px;border-radius: 18px;background:#00A0E9;color:#fff;" @click="handleShowSzqu">查看所在区域</div>
                <div class="act_box" v-if="showSzqu" style="padding: 12px;position: absolute;right:0;top:50px;z-index: 1;background:#fff;">
                  <div class='flex align_center'>
                    <div style="margin-right:8px">
                      <img src="./img/tip.png" style="width:16px;height:16px;display:block"/>
                    </div>
                    <div style="font-size:16px;font-weight: 600;color:#415B73">区域视图</div>
                  </div>
                  <img src="./img/line.png" style="width:100%;height:2px;display:block;margin:12px 0"/>
                  <div class=""  >
                    <!-- v-for='(item,index) in storeList.values' :key="index"   :class="index == tab?'act_title':'no_title'"-->
                    <div>
                      <img src="./img/quyutu.png" style="width:100%;display:block;" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="overflow: scroll;"  :style="{width:(ksWight - 463) + 'px',height:(ksHeght - 236) + 'px'}" >
              <div v-for="(item,index) in newStoreList" :key="index">
                <!-- 两排 -->
                <div class="flex flex_column align_center justify_center boxKuang" style="margin-bottom: 8px" v-if="index == 0 || index == 1">
                  <div style="color:#00A0E9;font-size: 20px;font-weight: 600;margin-bottom: 8px">{{ item.name }}</div>
                  <div class="flex scroll" style="gap: 4px;overflow: scroll;scrollbar-width: none;user-select: none;width:100%" @mousedown="handleMouseDown1"
                      @mouseup="handleMouseUp1" @mousemove="handleMouseMove1($event,index)" ref="scroll1" >
                    <div style="flex: 0 0 auto;">
                      <!-- <div style="text-align: center;color:#00A0E9;font-size: 16px;font-weight: 600;">{{ index==0?'A区':index==1?'B区':index==2?'C区':'D区' }}</div> -->
                      <div class="flex  flex_column flex_wrap" style="height:92px;gap: 4px; direction: rtl;">
                        <div v-for="(items,indexs) in item.list" :key="indexs" class="flex justify_end flex_column flex_wrap"  >
                          <a-popover  trigger="click" @popup-visible-change="handleChange($event,items.horizontal_span,items.release_span,items.warehouse_master_id)" v-model="popoverShow">
                            <div class="flex align_center justify_center cursor" style="height:44px;width:80px;" :class="items.status == 1?'lvbox':items.status == 2?'zibox':items.status == 3?'huibox':'hongbox'">
                              <div v-if="index == 0">{{ Math.ceil((indexs + 1 ) / 24) == 1?'A区': Math.ceil((indexs + 1 ) / 24) == 2?'B区': Math.ceil((indexs + 1 ) / 24) == 3?'C区':'D区'}} - {{ indexs + 1 }}</div>
                              <div v-else>{{ indexs + 1 }}</div>
                            </div>
                            <template #content v-if="popoverShow">
                              <div class='flex align_center justify_between'>
                                <div class='flex align_center'>
                                  <div style="margin-right:8px">
                                    <img src="./img/tip.png" style="width:16px;height:16px;display:block"/>
                                  </div>
                                  <div style="font-size:16px;font-weight: 600;color:#415B73"  v-if="index == 0">#{{ item.name }}{{ Math.ceil((indexs + 1 ) / 24) == 1?'A区': Math.ceil((indexs + 1 ) / 24) == 2?'B区': Math.ceil((indexs + 1 ) / 24) == 3?'C区':'D区'}} - {{ indexs + 1 }}</div>
                                  <div style="font-size:16px;font-weight: 600;color:#415B73"  v-else>#{{ item.name }}{{ indexs + 1 }}</div>
                                </div>
                                
                              </div>
                              <img src="./img/line.png" style="width:260px;height:2px;display:block;margin:12px 0"/>
                              <div v-if="newData.length != 0">
                                  <div class="tabVox" style="overflow-y: hidden;width:260px;height:22px;white-space: nowrap;margin-bottom:12px" v-dragscroll>
                                      <div :class="ind == newDataIndex?'tab_act':'tab_no'" style="margin-right:8px;display:inline-block;font-size:12px;line-height:12px;" v-for="(ite,ind) in newData" :key="ind" @click="handlenewDataIndex(ind)">品名{{ind + 1}}</div>
                                  </div>
                                  <div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">车号：</div>
                                          <div>{{newData[newDataIndex].prediction?.car_no}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">客户名称：</div>
                                          <div>{{newData[newDataIndex].prediction?.dept.name}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex" v-if="newData[newDataIndex].prediction?.box">
                                          <div style="width:100px">箱号：</div>
                                          <div>{{newData[newDataIndex].prediction?.box}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex" v-if="newData[newDataIndex].prediction?.box_type">
                                          <div style="width:100px">箱型箱类：</div>
                                          <div>{{newData[newDataIndex].prediction?.box_type}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">品名：</div>
                                          <div>{{newData[newDataIndex].prediction?.goods_name}}</div>
                                      </div>
                                      
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">件数：</div>
                                          <div>{{newData[newDataIndex]?.prediction?.number_yu}}件</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">重量：</div>
                                          <div>{{newData[newDataIndex]?.prediction?.weight_yu}}吨</div>
                                      </div>
                                      <div class="flex" style="margin-bottom:8px">
                                          <div style="width:100px">备注：</div>
                                          <div>{{newData[newDataIndex].remark}}</div>
                                      </div>
                                      <div class='flex align_center justify_center'>
                                        <div class='xiugai' @click='handleXiugai(newData[newDataIndex])'>修改库位</div>
                                      </div>
                                      
                                  </div>
                              </div>
                              <div v-if="items.status == 1">
                                  <a-empty>
                                      暂无存储货物
                                  </a-empty>
                              </div>
                              <div v-if="items.status == 3">
                                  <a-empty>
                                      该仓位暂不可用
                                  </a-empty>
                              </div>
                            </template>
                          </a-popover>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 一排 -->
                <div class="flex flex_column align_center justify_center boxKuang" style="margin-bottom: 8px" v-if="index != 0 && index != 1">
                  <div style="color:#00A0E9;font-size: 20px;font-weight: 600;margin-bottom: 8px">{{ item.name }}</div>
                  <div class="flex scroll" style="gap: 4px;overflow: scroll;scrollbar-width: none;user-select: none;width:100%" @mousedown="handleMouseDown1"
                      @mouseup="handleMouseUp1" @mousemove="handleMouseMove1($event,index)" ref="scroll1" >
                    <div style="flex: 0 0 auto;">
                      <!-- <div style="text-align: center;color:#00A0E9;font-size: 16px;font-weight: 600;">{{ index==0?'A区':index==1?'B区':index==2?'C区':'D区' }}</div> -->
                      <div class="flex  flex_column flex_wrap" style="height:48px;gap: 4px; direction: rtl;">
                        <div v-for="(items,indexs) in item.list" :key="indexs" class="flex justify_end flex_column flex_wrap"  >
                          <a-popover  trigger="click" @popup-visible-change="handleChange($event,items.horizontal_span,items.release_span,items.warehouse_master_id)" v-model="popoverShow">
                            <div class="flex align_center justify_center cursor" style="height:44px;width:80px;" :class="items.status == 1?'lvbox':items.status == 2?'zibox':items.status == 3?'huibox':'hongbox'">
                              <div>{{ indexs + 1 }}</div>
                            </div>
                            <template #content v-if="popoverShow">
                              <div class='flex align_center justify_between'>
                                <div class='flex align_center'>
                                  <div style="margin-right:8px">
                                    <img src="./img/tip.png" style="width:16px;height:16px;display:block"/>
                                  </div>
                                  <div style="font-size:16px;font-weight: 600;color:#415B73">#{{ item.name }}{{ indexs + 1 }}</div>
                                </div>
                                
                              </div>
                              <img src="./img/line.png" style="width:260px;height:2px;display:block;margin:12px 0"/>
                              <div v-if="newData.length != 0">
                                  <div class="tabVox" style="overflow-y: hidden;width:260px;height:22px;white-space: nowrap;margin-bottom:12px" v-dragscroll>
                                      <div :class="ind == newDataIndex?'tab_act':'tab_no'" style="margin-right:8px;display:inline-block;font-size:12px;line-height:12px;" v-for="(ite,ind) in newData" :key="ind" @click="handlenewDataIndex(ind)">货物{{ind + 1}}</div>
                                  </div>
                                  <div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">车号：</div>
                                          <div>{{newData[newDataIndex].prediction?.car_no}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">客户名称：</div>
                                          <div>{{newData[newDataIndex].prediction?.dept.name}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex" v-if="newData[newDataIndex].prediction?.box">
                                          <div style="width:100px">箱号：</div>
                                          <div>{{newData[newDataIndex].prediction?.box}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex" v-if="newData[newDataIndex].prediction?.box_type">
                                          <div style="width:100px">箱型箱类：</div>
                                          <div>{{newData[newDataIndex].prediction?.box_type}}</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">品名：</div>
                                          <div>{{newData[newDataIndex]?.prediction?.goods_name}}</div>
                                      </div>
                                      
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">件数：</div>
                                          <div>{{newData[newDataIndex]?.prediction?.number_yu}}件</div>
                                      </div>
                                      <div style="margin-bottom:8px" class="flex">
                                          <div style="width:100px">重量：</div>
                                          <div>{{newData[newDataIndex].prediction?.weight_yu}}吨</div>
                                      </div>
                                      <div class="flex" style="margin-bottom:8px">
                                          <div style="width:100px">备注：</div>
                                          <div>{{newData[newDataIndex].remark}}</div>
                                      </div>
                                      <div class='flex align_center justify_center'>
                                        <div class='xiugai' @click='handleXiugai(newData[newDataIndex])'>修改库位</div>
                                      </div>
                                      
                                  </div>
                              </div>
                              <div v-if="items.status == 1">
                                  <a-empty>
                                      暂无存储货物
                                  </a-empty>
                              </div>
                              <div v-if="items.status == 3">
                                  <a-empty>
                                      该仓位暂不可用
                                  </a-empty>
                              </div>
                            </template>
                          </a-popover>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="margin-bottom: 8px;" v-if="index == 0">
                  <img src="./img/11gudao.png" alt="" style="height: 50px;margin-bottom: 4px;" />
                  <img src="./img/13gudao.png" alt="" style="height: 50px;" />
                </div>
                <div style="margin-bottom: 8px;" v-if="index == 3">
                  <img src="./img/15gudao.png" alt="" style="height: 50px;margin-bottom: 4px;" />
                  <img src="./img/17gudao.png" alt="" style="height: 50px;" />
                </div>
              </div>
            </div>
            
          </div>
        </div>
        
        <!-- 修改库位 -->
        <a-modal :mask-closable="false"  v-model:visible="xiugaiShow" :on-before-ok="handleOk" @cancel="handleCancel">
          <template #title>
            修改库位
          </template>
          <div>
            <div class='flex align_center' style='margin-bottom:2%'>
              <div>选择横：</div>
              <a-select v-model="xiugaiItem.horizontal_position" :style="{width:'320px'}" placeholder="请选择库位-横">
                <a-option v-for="(item,index) in hengList" :key='index' :value="item.id" :label="item.name" />
              </a-select>
            </div>
            <div class='flex align_center' style='margin-bottom:2%'>
              <div>选择纵：</div>
              <a-select v-model="xiugaiItem.release_position" :style="{width:'320px'}" placeholder="请选择库位-纵">
                <a-option v-for="(item,index) in zongList" :key='index' :value="item.id" :label="item.name" />
              </a-select>
            </div>
            <div class='flex align_center' style='margin-bottom:2%'>
              <div>选择层：</div>
              <a-select v-model="xiugaiItem.reaches_position" :style="{width:'320px'}" placeholder="请选择库位-层">
                <a-option v-for="(item,index) in cengList" :key='index' :value="item.id" :label="item.name" />
              </a-select>
            </div>
          </div>
        </a-modal>

    </div>
  </template>
  <script setup>
  import { ref, reactive,onMounted,onActivated } from 'vue'
  import warehouseMaster from '@/api/warehouse/warehouseMaster'
  import { Message } from '@arco-design/web-vue'
  import { pinyin } from "pinyin-pro"
  import tool from '@/utils/tool'
  import * as common from '@/utils/common'
  import childs from '@/views/warehouse/childs/index.vue'
  import { request } from '@/utils/request.js'
  import {dateFormat} from '@/utils/util.js'
  const filterOption = (v,option)=>{
    return option.keywords.some(keywords=>keywords.includes(v))
  }
  const scroll1 = ref(null)
  const startX1  = ref(0)
  const scrolling1   = ref(false)

  const newStoreList = ref([
    [{position:1},{position:2},{position:3},{position:4},{position:5},{position:6},{position:7},{position:8},{position:9},{position:10},{position:11},{position:12},
    {position:13},{position:14},{position:15},{position:16},{position:17},{position:18},{position:19},{position:20},{position:21},{position:22},{position:23},{position:24},
    ],
    [{position:25},{position:26},{position:27},{position:28},{position:29},{position:30},{position:31},{position:32},{position:33},{position:34},{position:35},{position:36},
    {position:37},{position:38},{position:39},{position:40},{position:41},{position:42},{position:43},{position:44},{position:45},{position:46},{position:47},{position:48},
    ],
    [{position:49},{position:50},{position:51},{position:52},{position:53},{position:54},{position:55},{position:56},{position:57},{position:58},{position:59},{position:60},
    {position:61},{position:62},{position:63},{position:64},{position:65},{position:66},{position:67},{position:68},{position:69},{position:70},{position:71},{position:72},
    ],
    [{position:73},{position:74},{position:75},{position:76},{position:77},{position:78},{position:79},{position:80},{position:81},{position:82},{position:83},{position:84},
    {position:85},{position:86},{position:87},{position:88},{position:89},{position:90},{position:91},{position:92},{position:93},{position:94},{position:95},{position:96},
    ],
  ])
  const fieldNamedept = {value: 'id', label: 'name'}
  const crudRef = ref()
  const warehousechildsRef = ref()
  const visibleWarehouse = ref(false)
  const storeId = ref(0)
  const hengList = ref([])
  const hengId = ref(0)
  const zongList = ref([])
  const zongId = ref(0)
  const cengList = ref([])
  const cengId = ref(0)
  const xiugaiShow = ref(false)
  const carShow = ref(false)
  const xiugaiItem = ref({})
  const dept_list = ref([])
  const dept_id = ref()
  const storeList = reactive([])
  const ksHeght = ref(0)
  const ksWight = ref(0)
  const newDete = ref(0)
  const goods_name = ref('')
  const  car_no =  ref('')
  const  box =  ref('')
  let newData = []
  const newDataIndex = ref(0)
  const popoverShow = ref(false)
  const storeArr = ref([
    
  ])
  const showSzqu = ref(false)
  const storeName = ref()
  ksHeght.value = window.innerHeight
  ksWight.value = window.innerWidth
  newDete.value = dateFormat(new Date().getTime(),'Y年m月d日')
  onMounted(()=>{
    getList()
    handleStorePanel()
    handleDeptList()
  })
  const handleXiugai = (item)=>{
    xiugaiItem.value = item
    xiugaiShow.value = true

  }
  const handleMouseDown1 = (event) => {
    startX1.value = event.clientX;
    scrolling1.value = true;
  };
  const handleMouseUp1 = () => {
    scrolling1.value = false;
  };
  const handleMouseMove1 = (event,index) => {
    if (scrolling1.value) {
      const currentX = event.clientX;
      const delta = currentX - startX1.value;
      startX1.value = currentX;
      // 更新滚动位置
      scroll1.value[index].scrollLeft = ((scroll1.value[index].scrollLeft - 0) - (delta - 0));
    }
  };
  const handleCancel = ()=>{
    xiugaiShow.value = false
  }
  const handleOk = async ()=>{
    let res = await request({
        url: 'warehouse/master/updateKuwei',
        method: 'post',
        data:{
          ...xiugaiItem.value
        }
      })
    if(res.code == 200){
        Message.success('修改成功！')
        xiugaiShow.value = false
        handleStorePanel()
        return true
    }else{
        Message.error(res.message)
        return false
    }
    
  }
  const handleDeptList = ()=>{
    request({
        url: 'system/dept/remote',
        method: 'post',
        data:{
          openPage:false,
          remoteOption:{
            filter:{
              type:['=',2],
              status: ['=',1]
            },
            select: ["id", "name"],
            sort: {id: "desc"}
          }
        }
      }).then(res=>{
        res.data.map((v,i)=>{
              v.keywords = [
                v.name,
                pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
                pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
              ]
        })
        dept_list.value = res.data
      })
  } 

  const options = reactive({
    id: 'flyos_warehouse_master',
    rowSelection: {
      showCheckedAll: true
    },
    pk: 'id',
    operationColumn: true,
    operationWidth: 160,
    formOption: {
      viewType: 'modal',
      width: 600
    },
    api: warehouseMaster.getList,
    recycleApi: warehouseMaster.getRecycleList,
    add: {
      show: true,
      api: warehouseMaster.save,
      auth: ['warehouse:master:save']
    },
    edit: {
      show: true,
      api: warehouseMaster.update,
      auth: ['warehouse:master:update']
    },
    delete: {
      show: true,
      api: warehouseMaster.deletes,
      auth: ['warehouse:master:delete'],
      realApi: warehouseMaster.realDeletes,
      realAuth: ['warehouse:master:realDeletes']
    },
    recovery: {
      show: true,
      api: warehouseMaster.recoverys,
      auth: ['warehouse:master:recovery']
    },
    import: {
      show: true,
      url: 'warehouse/master/import',
      templateUrl: 'warehouse/master/downloadTemplate',
      auth: ['warehouse:master:import']
    },
    export: {
      show: true,
      url: 'warehouse/master/export',
      auth: ['warehouse:master:export']
    }
  })
  
  const columns = reactive([
    {
      title: "ID",
      dataIndex: "id",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      commonRules: {
        required: true,
        message: "请输入ID"
      }
    },
    {
      title: '仓库类型',
      dataIndex: 'type_id',
      align:'center',
      formType: 'select',
      hide:true,
      dict: {
          // 远程通用接口请求，新版代码生成都有一个 remote 接口
          remote: 'warehouse/type/remote',
          // 指定组件接收的props
          props: { label: 'name', value: 'id' },
          // 开启分页
          openPage: true,
          // 远程请求配置项
          remoteOption: {
              // 按用户名排序
              sort: { id: 'desc' }, // 如果不指定排序方式，默认为正序排序
              // 设置查询的字段
              select: [ 'id', 'name' ],
              // 设置数据过滤
              filter: {
              },
              // 关联模型
              relations: [
              ]
          }
      }
    },
    {
      title: "仓库名称",
      dataIndex: "name",
      formType: "input",
      search: true,
      commonRules: {
        required: true,
        message: "请输入仓库名称"
      }
    },
    {
      title: "横跨",
      dataIndex: "horizontal_span",
      formType: "input-number",
      search: true,
      commonRules: {
        required: true,
        message: "请输入横跨"
      }
    },
    {
      title: "纵跨",
      dataIndex: "release_span",
      formType: "input-number",
      search: true,
      commonRules: {
        required: true,
        message: "请输入纵跨"
      }
    },
    {
      title: "层级",
      dataIndex: "reaches",
      formType: "input-number",
      search: true,
      commonRules: {
        required: true,
        message: "请输入层级"
      }
    },
    {
      title: "状态",
      dataIndex: "status",
      formType: "switch",
      search: true,
      commonRules: {
        required: true,
        message: "请输入状态"
      },
      checkedValue: "1",
      uncheckedValue: "2"
    },
    // {
    //   title: "库存总量",
    //   dataIndex: "zong_num",
    //   formType: "input-number",
    //   search: true
    // },
    // {
    //   title: "库存余量",
    //   dataIndex: "yu_num",
    //   formType: "input-number",
    //   search: true
    // },
    // {
    //   title: "订单总量",
    //   dataIndex: "order_zong_num",
    //   formType: "input-number",
    //   search: true
    // },
    // {
    //   title: "订单余量",
    //   dataIndex: "order_yu_num",
    //   formType: "input-number",
    //   search: true
    // },
    {
      title: "创建时间",
      dataIndex: "created_at",
      formType: "range",
      search: true,
      addDisplay: false,
      editDisplay: false,
      showTime: true
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "删除时间",
      dataIndex: "deleted_at",
      formType: "date",
      addDisplay: false,
      editDisplay: false,
      hide: true,
      showTime: true
    },
    {
      title: "创建者",
      dataIndex: "created_by",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    },
    {
      title: "更新者",
      dataIndex: "updated_by",
      formType: "input",
      addDisplay: false,
      editDisplay: false,
      hide: true
    },
    // {
    //   title: "备注",
    //   dataIndex: "remark",
    //   formType: "input",
    //   hide: true
    // }
  ])
  
  // 仓库列表
  const getList = ()=>{
    request({
        url: 'warehouse/master/index',
        method: 'get',
        params:{}
      }).then(res=>{
        let _data = res.data.items
        _data.map((v,i)=>{
          v.number = (v.number - 0)
          v.number_day = (v.number_day - 0)
          v.number_day_chu = (v.number_day_chu - 0)
          v.weight = (v.weight - 0).toFixed(3)
          v.weight_day = (v.weight_day - 0).toFixed(3)
          v.weight_day_chu = (v.weight_day_chu - 0).toFixed(3)
          v.yu_kuwei = (v.yu_kuwei - 0)
        })
        storeList.values = res.data.items
        storeId.value = res.data.items[0].id
        storeName.value = res.data.items[0].name
        let hengarr = []
        let zongarr = []
        let cengarr = []
        for(let i = 1;i <= res.data.items[0].horizontal_span;i++ ){
          hengarr.push({name:i + '',id:i})
        }
        for(let j = 1;j <= res.data.items[0].release_span;j++ ){
          zongarr.push({name:j + '',id:j})
        }
        for(let z = 1;z <= res.data.items[0].reaches;z++ ){
          cengarr.push({name:z + '',id:z})
        }
        hengList.value = hengarr
        zongList.value = zongarr
        cengList.value = cengarr
        
        // let heng = res.data.items[0].horizontal_span
        // let zong = res.data.items[0].release_span
        // for(let i = 1;i<=heng-0;i++){
        //   storeArr.value.push({heng:i})
        // }
        // storeArr.value.map((v,i)=>{
        //   let childArr = []
        //   for(let m = 1;m<=zong-0;m++){
        //     childArr.push({zong:m})
        //   }
        //   v.child = childArr
        // })
      })
  }
//   /warehouse/master/getCcList?warehouse_master_id=4   右侧显示数据
  const handleStorePanel = (id) =>{
    request({
        url: 'warehouse/master/getCcList',
        method: 'get',
        params:{
            
        }
      }).then(res=>{
        // if(id == 7){
        //   let _data = res.data
        //   let arr = []
        //   let arrd = []
        //   let childArr = []
        //   _data.map((v,i)=>{
        //     arr.push(v.horizontal_span)
        //   })
        //   arr = [...new Set(arr)]
        //   arr.map((v,i)=>{
        //     arrd.push({child:[]})
        //   })
        //   arr.map((v,i)=>{
        //     _data.map((vv,ii)=>{
        //       if(v == vv.horizontal_span){
        //         arrd[i].child.push(vv)
        //       }
        //     })
        //   })
        //   storeArr.value = arrd
        // }else{
        //   storeArr.value = res.data
        // }
        newStoreList.value = res.data
        console.log(newStoreList.value)
      })
  }
  // 搜索   
  const handleSech = ()=>{
    let obj = {}
    obj.warehouse_master_id = storeId.value
    if(dept_id.value){
        obj.dept_id = dept_id.value
    }
    if(goods_name.value){
        obj.goods_name = goods_name.value
    }
    if(box.value){
        obj.box = box.value
    }
    if(car_no.value){
        obj.car_no = car_no.value
    }
    if(!dept_id.value && !goods_name.value && !box.value && !car_no.value){
        request({
            url: 'warehouse/master/getCcList',
            method: 'get',
            params:{
                
            }
        }).then(res=>{
          newStoreList.value = res.data
        })
    }else{
      let storeArrs = []
      request({
            url: 'warehouse/master/getCcList',
            method: 'get',
            params:{
                
            }
        }).then(res=>{
          storeArrs = res.data
          request({
            url: 'warehouse/master/getCcSearch',
            method: 'get',
            params:{ 
                // warehouse_master_id:storeId.value,
                dept_id:dept_id.value,
                goods_name:goods_name.value.trim(),
                car_no:car_no.value.trim(),
                box:box.value.trim(),
            }
          }).then(res=>{
              let _datas = res.data
              storeArrs.map((v,i)=>{
                _datas.map((vv,ii)=>{
                  if(v.id == vv.warehouse_id){
                    v.list.map((vvv,iii)=>{
                      if(vvv.horizontal_span == vv.horizontal_position && vvv.release_span == vv.release_position){
                        vvv.status = 4
                      }
                    })
                  }
                })
                
              })
              console.log("storeArrs:",storeArrs)
              console.log("_datas:",_datas)
              
              newStoreList.value = storeArrs
          })
        })
        
    }
    
  }
  // 仓库数据
  const getData = ()=>{
    request({
        url: 'warehouse/childs/remote',
        method: 'post',
        data:{
          openPage:false,
          remoteOption:{
            filter:{
              id:['>',storeId.value]
            }
          }
        }
      }).then(res=>{
      })
  }
  const handleChange = (e,h,z,warehouse_master_id)=>{
    if(e){
        request({
        url: 'warehouse/master/getCcSearch',
        method: 'get',
        params:{
            warehouse_master_id:warehouse_master_id,
            horizontal_span:h,
            release_span:z
        }
      }).then(res=>{
        let  _data = res.data 
        let arr = []
        _data.map((v,i)=>{
          if(v.prediction_id != 0 && v.prediction != null){
            v.prediction = v.prediction
            // v.prediction.number_yu = v.prediction.number
            // v.prediction.weight_yu = v.prediction.weight
          }else{
            v.prediction = v.wareuserdetail
          }
          console.log('仓储信息：',v)
          if(v.prediction.number_yu != 0 || v.prediction.weight_yu != 0){
            arr.push(v)
          }
        })
        newData = arr
        console.log('arr:',arr)
        newDataIndex.value = 0
        popoverShow.value = true
      })
    }else{
        popoverShow.value = false
        newData = []
        newDataIndex.value = 0
    }
  }
  const handlenewDataIndex = (idnex)=>{
    newDataIndex.value = idnex
  }
  //  所在区域显示隐藏   
  const handleShowSzqu = ()=>{
    showSzqu.value = !showSzqu.value
  }   
  
  const warehouseList = (row) => {
    warehousechildsRef.value.open(row)
    visibleWarehouse.value = true
  }
  
  const numberOperation = (newValue, id, numberName) => {
    warehouseMaster.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
      res.success && Message.success(res.message)
    }).catch( e => { console.log(e) } )
  }
  
  const switchStatus = (statusValue, id, statusName) => {
    warehouseMaster.changeStatus({ id, statusName, statusValue }).then( res => {
      res.success && Message.success(res.message)
    }).catch( e => { console.log(e) } )
  }
  
  const handleTab = (id)=>{
    storeId.value = id
    // let heng = 0
    // let zong = 0
    storeList.values.map((v,i)=>{
        if(v.id == id){
            // heng = v.horizontal_span
            // zong = v.release_span
            storeName.value = v.name
            let hengarr = []
            let zongarr = []
            let cengarr = []
            for(let i = 1;i <= v.horizontal_span;i++ ){
              hengarr.push({name:i + '',id:i})
            }
            for(let j = 1;j <= v.release_span;j++ ){
              zongarr.push({name:j + '',id:j})
            }
            for(let z = 1;z <= v.reaches;z++ ){
              cengarr.push({name:z + '',id:z})
            }
            hengList.value = hengarr
            zongList.value = zongarr
            cengList.value = cengarr
        }
    })
    // let arr = []
    // for(let i = 1;i<=heng-0;i++){
    //     arr.push({heng:i})
    // }
    // storeArr.value = arr
    // storeArr.value.map((v,i)=>{
    //     let childArr = []
    //     for(let m = 1;m<=zong-0;m++){
    //     childArr.push({zong:m})
    //     }
    //     v.child = childArr
    // })
  }
  
  
  </script>
  <style scoped>
  .flex{
    display: flex;
  }
  .flex_1{
    flex: 1;
  }
  .align_center{
    align-items: center;
  }
  .align_start{
    align-items: flex-start;
  }
  .align_end{
    align-items: flex-end;
  }
  .justify_center{
    justify-content: center;
  }
  .relative{
    position: relative;
  }
  .justify_between{
    justify-content: space-between;
  }
  .justify_around{
    justify-content: space-around;
  }
  .justify_end{
    justify-content: flex-end;
  }
  .flex_wrap{
    flex-wrap: wrap;
  }
  .flex_column{
    flex-direction: column;
  }
  .ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .width0{
    width: 0px;
  }
  .border_box{
    box-sizing: border-box;
  }
  .shodow{ 
    box-shadow: 0px 3px 6px rgba(225, 226, 228, 0.86);
  }
  .text_center{
      text-align: center !important;
  }
  .act_box{
    border-radius: 9px;
    border: 2px solid #00A0E9;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(222, 239, 255, 0.76) 100%);
    width:260px;
    box-sizing: border-box;
  }
  .no_box{
    border-radius: 9px;
    border: 2px solid #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(222, 239, 255, 0.76) 100%);
    width:260px;
    box-sizing: border-box;
    opacity:0.5;
  }
  .tabVox{
    cursor: pointer;
  }
  .tabVox::-webkit-scrollbar {
    display: none;
    
  }
  .scroll::-webkit-scrollbar{
    display: none;
  }
  .boxKuang{
    border: 2px solid #00A0E9;
    background: #E1F3FB;
    border-radius: 6px;
    padding: 8px;
  }
  .tab_no{
    border-radius: 2px;
    border: 1px solid rgba(0, 160, 233, 0.60);
    padding:3px 7px;
    color: rgba(0, 160, 233, 0.40);
  }
  .tab_act{
    border-radius: 2px;
    border: 1px solid #00A0E9;;
    padding:3px 7px;
    color: #fff;
    background:#00A0E9;
  }
  .width50{
    width:120px;
  }
  .xiugai{
    color:rgba(0,0,0,.6);
    font-size:14px;
    line-height: 20px;
    /* border-bottom: 1px solid rgba(0,0,0,.6); */
    cursor: pointer;
    padding:2px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.6);
  }
  .input{
      width:140px;
      padding:10px 20px;
      background: rgba(242,243,245);
      border:1px solid rgba(242,243,245);
      font-size:16px;
      line-height:16px;
      border-radius: 18px;
      outline: none;/*清除input点击之后的黑色边框*/
      box-sizing: border-box;
    }
    .input:focus{
      background: #fff;
      border:1px solid #1e80ff;
    }
  
  /* 滚动条 */
  body *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  body *::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 2px;
  }
  body *::-webkit-scrollbar-thumb {
    background: rgb(205, 206, 206);
  
    border-radius: 10px;
  }
  body *::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  body *::-webkit-scrollbar-corner {
    background: #fff;
  }
  .cursor{
    cursor: pointer
  }
  
  .lvbox{
    background:#74DB91;
    box-sizing: border-box;
    border-bottom:2px solid rgba(0, 0, 0, 0.15);
    color:#fff;
    border-radius:4px;
  }
  .huibox{
    background:#A8A8A8;
    box-sizing: border-box;
    border-bottom:2px solid rgba(0, 0, 0, 0.15);
    color:#fff;
    border-radius:4px;
  }
  .zibox{
    background:#C789ED;
    box-sizing: border-box;
    border-bottom:2px solid rgba(255, 255, 255, 0.40);
    color:#fff;
    border-radius:4px;
  }
  .hongbox{
    background:#E94829;
    box-sizing: border-box;
    border-bottom:2px solid rgba(255, 255, 255, 0.40);
    color:#fff;
    border-radius:4px;
  }
  .titleBox{
    margin-bottom:4px;
  }
  .act_title{
    font-size:14px;
    line-height:22px;
    font-weight: 600;
    color:#fff;
    background: #00A0E9;
  }
  .no_title{
    font-size:14px;
    line-height:22px;
    font-weight: 600;
    color:#00A0E9;
    background: rgba(0, 160, 233, 0.10);
  
  
  }
  .titleBox:last-child{
    margin-bottom:0px;
  }
  
  
  
  
  </style>
  <script> export default { name: 'warehouse:master' } </script>